<template>
  <div class="crud-container">
    <h2>Users 表格</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>酒店订单ID</th>
          <th>景点订单ID</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>
            <input v-if="editingUserIndex === index" v-model="user.name" />
            <span v-else>{{ user.name }}</span>
          </td>
          <td>
            <input v-if="editingUserIndex === index" v-model="user.age" />
            <span v-else>{{ user.age }}</span>
          </td>
          <td>
            <input v-if="editingUserIndex === index" v-model="user.hotelorderid" />
            <span v-else>{{ user.hotelorderid }}</span>
          </td>
          <td>
            <input v-if="editingUserIndex === index" v-model="user.scenicspotorderid" />
            <span v-else>{{ user.scenicspotorderid }}</span>
          </td>
          <td>
            <button v-if="editingUserIndex === index" @click="saveUser(index)">保存</button>
            <button v-else @click="editUser(index)">编辑</button>
            <button @click="deleteUser(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>添加新用户</h3>
    <form @submit.prevent="addUser">
      <input v-model="newUser.name" placeholder="姓名" required />
      <input v-model="newUser.age" type="number" placeholder="年龄" required />
      <input v-model="newUser.hotelorderid" type="number" placeholder="酒店订单ID" />
      <input v-model="newUser.scenicspotorderid" type="number" placeholder="景点订单ID" />
      <button type="submit">添加</button>
    </form>

    <h2>Hotels 表格</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>酒店订单ID</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(hotel, index) in hotels" :key="hotel.id">
          <td>{{ hotel.id }}</td>
          <td>
            <input v-if="editingHotelIndex === index" v-model="hotel.name" />
            <span v-else>{{ hotel.name }}</span>
          </td>
          <td>
            <input v-if="editingHotelIndex === index" v-model="hotel.hotelorderid" />
            <span v-else>{{ hotel.hotelorderid }}</span>
          </td>
          <td>
            <input v-if="editingHotelIndex === index" v-model="hotel.price" />
            <span v-else>{{ hotel.price }}</span>
          </td>
          <td>
            <button v-if="editingHotelIndex === index" @click="saveHotel(index)">保存</button>
            <button v-else @click="editHotel(index)">编辑</button>
            <button @click="deleteHotel(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>添加新酒店</h3>
    <form @submit.prevent="addHotel">
      <input v-model="newHotel.name" placeholder="名称" required />
      <input v-model="newHotel.hotelorderid" type="number" placeholder="酒店订单ID" />
      <input v-model="newHotel.price" type="number" placeholder="价格" required />
      <button type="submit">添加</button>
    </form>

    <h2>Hotel Orders 表格</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>酒店ID</th>
          <th>用户ID</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(hotelorder, index) in hotelorders" :key="hotelorder.id">
          <td>{{ hotelorder.id }}</td>
          <td>
            <input v-if="editingHotelOrderIndex === index" v-model="hotelorder.hotelid" />
            <span v-else>{{ hotelorder.hotelid }}</span>
          </td>
          <td>
            <input v-if="editingHotelOrderIndex === index" v-model="hotelorder.userid" />
            <span v-else>{{ hotelorder.userid }}</span>
          </td>
          <td>
            <button v-if="editingHotelOrderIndex === index" @click="saveHotelOrder(index)">保存</button>
            <button v-else @click="editHotelOrder(index)">编辑</button>
            <button @click="deleteHotelOrder(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>添加新酒店订单</h3>
    <form @submit.prevent="addHotelOrder">
      <input v-model="newHotelOrder.hotelid" type="number" placeholder="酒店ID" required />
      <input v-model="newHotelOrder.userid" type="number" placeholder="用户ID" required />
      <button type="submit">添加</button>
    </form>

    <h2>Scenic Spots 表格</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>景点订单ID</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(scenicspot, index) in scenicspots" :key="scenicspot.id">
          <td>{{ scenicspot.id }}</td>
          <td>
            <input v-if="editingScenicSpotIndex === index" v-model="scenicspot.name" />
            <span v-else>{{ scenicspot.name }}</span>
          </td>
          <td>
            <input v-if="editingScenicSpotIndex === index" v-model="scenicspot.scenicspotorderid" />
            <span v-else>{{ scenicspot.scenicspotorderid }}</span>
          </td>
          <td>
            <button v-if="editingScenicSpotIndex === index" @click="saveScenicSpot(index)">保存</button>
            <button v-else @click="editScenicSpot(index)">编辑</button>
            <button @click="deleteScenicSpot(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>添加新景点</h3>
    <form @submit.prevent="addScenicSpot">
      <input v-model="newScenicSpot.name" placeholder="名称" required />
      <input v-model="newScenicSpot.scenicspotorderid" type="number" placeholder="景点订单ID" />
      <button type="submit">添加</button>
    </form>

    <h2>Scenic Spot Orders 表格</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>景点ID</th>
          <th>用户ID</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(scenicspotorder, index) in scenicspotorders" :key="scenicspotorder.id">
          <td>{{ scenicspotorder.id }}</td>
          <td>
            <input v-if="editingScenicSpotOrderIndex === index" v-model="scenicspotorder.scenicspot" />
            <span v-else>{{ scenicspotorder.scenicspot }}</span>
          </td>
          <td>
            <input v-if="editingScenicSpotOrderIndex === index" v-model="scenicspotorder.userid" />
            <span v-else>{{ scenicspotorder.userid }}</span>
          </td>
          <td>
            <button v-if="editingScenicSpotOrderIndex === index" @click="saveScenicSpotOrder(index)">保存</button>
            <button v-else @click="editScenicSpotOrder(index)">编辑</button>
            <button @click="deleteScenicSpotOrder(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>添加新景点订单</h3>
    <form @submit.prevent="addScenicSpotOrder">
      <input v-model="newScenicSpotOrder.scenicspot" type="number" placeholder="景点ID" required />
      <input v-model="newScenicSpotOrder.userid" type="number" placeholder="用户ID" required />
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', age: 25, hotelorderid: 1, scenicspotorderid: 1 },
        { id: 2, name: '李四', age: 30, hotelorderid: 2, scenicspotorderid: 2 },
      ],
      newUser: { name: '', age: '', hotelorderid: '', scenicspotorderid: '' },
      editingUserIndex: -1,

      hotels: [
        { id: 1, name: '酒店1', hotelorderid: 1, price: 100 },
        { id: 2, name: '酒店2', hotelorderid: 2, price: 150 },
      ],
      newHotel: { name: '', hotelorderid: '', price: '' },
      editingHotelIndex: -1,

      hotelorders: [
        { id: 1, hotelid: 1, userid: 1 },
        { id: 2, hotelid: 2, userid: 2 },
      ],
      newHotelOrder: { hotelid: '', userid: '' },
      editingHotelOrderIndex: -1,

      scenicspots: [
        { id: 1, name: '景点1', scenicspotorderid: 1 },
        { id: 2, name: '景点2', scenicspotorderid: 2 },
      ],
      newScenicSpot: { name: '', scenicspotorderid: '' },
      editingScenicSpotIndex: -1,

      scenicspotorders: [
        { id: 1, scenicspot: 1, userid: 1 },
        { id: 2, scenicspot: 2, userid: 2 },
      ],
      newScenicSpotOrder: { scenicspot: '', userid: '' },
      editingScenicSpotOrderIndex: -1,
    };
  },
  methods: {
    addUser() {
      if (this.newUser.name && this.newUser.age) {
        this.users.push({ id: this.users.length + 1, ...this.newUser });
        this.newUser = { name: '', age: '', hotelorderid: '', scenicspotorderid: '' };
      }
    },
    editUser(index) {
      this.editingUserIndex = index;
    },
    saveUser(index) {
      this.editingUserIndex = -1;
    },
    deleteUser(index) {
      this.users.splice(index, 1);
    },

    addHotel() {
      if (this.newHotel.name && this.newHotel.price) {
        this.hotels.push({ id: this.hotels.length + 1, ...this.newHotel });
        this.newHotel = { name: '', hotelorderid: '', price: '' };
      }
    },
    editHotel(index) {
      this.editingHotelIndex = index;
    },
    saveHotel(index) {
      this.editingHotelIndex = -1;
    },
    deleteHotel(index) {
      this.hotels.splice(index, 1);
    },

    addHotelOrder() {
      if (this.newHotelOrder.hotelid && this.newHotelOrder.userid) {
        this.hotelorders.push({ id: this.hotelorders.length + 1, ...this.newHotelOrder });
        this.newHotelOrder = { hotelid: '', userid: '' };
      }
    },
    editHotelOrder(index) {
      this.editingHotelOrderIndex = index;
    },
    saveHotelOrder(index) {
      this.editingHotelOrderIndex = -1;
    },
    deleteHotelOrder(index) {
      this.hotelorders.splice(index, 1);
    },

    addScenicSpot() {
      if (this.newScenicSpot.name) {
        this.scenicspots.push({ id: this.scenicspots.length + 1, ...this.newScenicSpot });
        this.newScenicSpot = { name: '', scenicspotorderid: '' };
      }
    },
    editScenicSpot(index) {
      this.editingScenicSpotIndex = index;
    },
    saveScenicSpot(index) {
      this.editingScenicSpotIndex = -1;
    },
    deleteScenicSpot(index) {
      this.scenicspots.splice(index, 1);
    },

    addScenicSpotOrder() {
      if (this.newScenicSpotOrder.scenicspot && this.newScenicSpotOrder.userid) {
        this.scenicspotorders.push({ id: this.scenicspotorders.length + 1, ...this.newScenicSpotOrder });
        this.newScenicSpotOrder = { scenicspot: '', userid: '' };
      }
    },
    editScenicSpotOrder(index) {
      this.editingScenicSpotOrderIndex = index;
    },
    saveScenicSpotOrder(index) {
      this.editingScenicSpotOrderIndex = -1;
    },
    deleteScenicSpotOrder(index) {
      this.scenicspotorders.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.crud-container {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h2, h3 {
  color: #333;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f4f4f4;
}

input {
  padding: 5px;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 5px 10px;
  margin: 0 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #ddd;
}

button:active {
  background-color: #ccc;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
}

button[type="submit"]:hover {
  background-color: #45a049;
}

button[type="submit"]:active {
  background-color: #3e8e41;
}
</style>
